<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全国新房</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/swiper.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<style>
			.tips-panelcss{
				position: fixed;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				z-index: 1111;
				background-color: rgba(0,0,0,0.5);
				display: none;
			}
			
			.tips-panelcss .panel{
				background-color: #FFFFFF;
				width: 860px;
				/*height:auto;*/
				max-height: 760px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 80px;
				border-radius: 3px;
				
			}
			
			.tips-panelcss .panel .content{
				padding: 5px;
			}
			
			.tips-panelcss .panel .content .close-btn{
				position: absolute;
				right: 10px;
				top: 10px;
				background: none;
				border: none;
				outline: none;
			}
			
			.contentimg{
				margin: 20px;
				margin-top: 30px; 
				max-height: 600px;
				overflow-y:auto;
			}
			
			.labnoprice{
				font-size: 22px;
				color: #FF9C00;
				font-weight: bold;
			}
			.swiper-button-prev1{
				
			}
			
			.swiper-button-next1{
				
			}
			
		</style>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="../js/utils.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="http://api.map.baidu.com/getscript?v=2.0&ak=pbmOo1GbhV3OpnvT06G4gla3hraVKTIz"></script>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	</head>

	<body>
		
		<div id="page_header" class="page-header"></div>
		<div id="page_menu" class="content-area menu items-display-flex flex-row flex-between"></div>
		<div id="city_sets"></div>
		<div id="maincontent" class="xf-detail">
			<div class="part1">
				<div class="content-area">
					<div class="nav">
						口袋买房<span class="lab iconfont icon-jiantou_xiangyouliangci"></span>
						<span v-on:click="tocurxf()" style="cursor: pointer;">{{curCityName}}新房</span>
						<span class="lab iconfont icon-jiantou_xiangyouliangci"></span>
						<span>{{housedata.house_name}}</span>
					</div>
					<div class="title">{{housedata.house_name}}<img v-on:click='noticeAction()' v-bind:src='housedata.has_attention==1 ? "../img/notice1.png":"../img/notice0.png"' /></div>
					<div class="flag items-display-flex flex-between flex-row">
						<div><span v-for="flag in housedata.mark">{{flag}}</span></div>
						<div class="items-display-flex flex-row">
							<div class="online-serivce" v-on:click="baobeiOnline">在线报备</div>
							<div class="contact-serivce" v-on:click="helpkefu">联系客服</div>
						</div>
					</div>
				</div>
			</div>

			<div class="content-area">
				<div class="part2 items-display-flex flex-row flex-between">
					<div class="pics poz-relative">
						<div class="img-flag">
							效果图&nbsp;{{(imgindex+1)}}/{{(housedata.imageLen)}}
						</div>
						<!--560x390-->
						<div class="swiper-container3">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="(item,index) in housedata.images">
									<div class="item">
										<img v-bind:src="item" @click='showBigImg(item,index)' />
									</div>
								</div>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-button-next next"><span class="iconfont icon-nvxingfuben1"></span></div>
							<div class="swiper-button-prev prev"><span class="iconfont icon-nvxingfuben"></span></div>
						</div>
					</div>
					<div class="intro">
								
						<div class="price" v-if="housedata.house_unit_price>0">
							单价：<span class="lab1">{{housedata.house_unit_price}}</span><span class="lab2">元/m<sup>2</sup></span>
						</div>
						
						<div class="price" v-if="housedata.house_unit_price=='--'">
							<span class="labnoprice">售价待定</span>
						</div>
						<div class="lab3">
							<div>底价返现：<span>{{housedata.return_money}}万</span></div>
							<div v-if="housedata.total_price>0">总价：{{housedata.total_price}}万</div>
							<div v-else>总价：待定</div>
							<div>地址：{{housedata.address}}</div>
							<div>开发商：{{housedata.developer}}</div>
							<div>物业：{{housedata.property_company}}</div>
							<div>首付比例：{{housedata.payment_rate}}%{{paymoneys(housedata.payment_rate,housedata.total_price)}}</div>
							<div>优惠政策：{{housedata.discount_str}}</div>
						</div>
					</div>
				</div>
				<div class="ads">
					<img src="../img/index/ads.jpg" />
				</div>
				<div class="part3">
					<div class='title'>楼盘信息</div>
					<div class="items items-display-flex flex-row flex-display-warp">
						<div class="item">物业类型：{{housedata.category}}</div>
						<div class="item">装修类型：{{housedata.decoration}}</div>
						<div class="item">绿化率：{{housedata.greening_rate}}%</div>

						<div class="item">预计交房：{{housedata.checkout}}</div>
						<div class="item">返现周期：{{housedata.return_day}}</div>
						<div class="item">车位数：{{housedata.car_number}}</div>

						<div class="item">建筑面积：{{housedata.house_area}}m<sup>2</sup></div>
						<div class="item">产权年限：{{housedata.property}} 年</div>
						<div class="item">物业费：{{housedata.property_fee}} 元/平米/月</div>

						<div class="item">容积率：{{housedata.plot_ratio}}</div>
						<div class="item">建筑类型：{{housedata.building_type}}</div>
						<div class="item"></div>

						<div class="item">规划户数：{{housedata.layout_number}}</div>
						<div class="item">占地面积：{{housedata.area_covered}}</div>
						<div class="item"></div>
					</div>
				</div>
				<div class="part3">
					<div class="title">主力户型</div>
					<div class="types">
						<div v-if="index<typecansee" v-for="(house,index) in houseTypeImage" class="type items-display-flex flex-row flex-between">
							<div class="intro items-display-flex flex-row">
								<img v-bind:src="house.img_path"  class="detailimg" v-on:click="showBigTypeImg(house,index)"/>
								
								<div class="lab">
									<div><strong>{{house.name}}</strong></div>
									<div>{{house.house_type}}&nbsp;<span v-if="house.area">{{house.area}}m<sup>2</sup></span></div>
									<!--<div>{{house.house_type}}&nbsp;<span v-if="house.area>0">{{house.area}}m<sup>2</sup></span></div>-->
								</div>
								
								<!--<img v-bind:src="house.img_path" v-bind:id="'himg'+index" class="detailimg" style="width: 400px;height: auto;"/>-->
								
							</div>
							
							<div class="price" v-if="house.price=='参考首付：暂无'"><span>{{house.price}}</span></div>
							<div class="price" v-else-if="house.price"><span>{{house.price}}万</span>起</div>
							<div class="price" v-else><span>售价待定</span></div>
						</div>
					</div>
					<div class="more-type" v-if="houseTypeImage.length > typecansee" v-on:click="dealAllHouseType(1)">
						查看全部{{houseTypeImage.length}}个户型
					</div>
					<div class="more-type" v-if="houseTypeImage.length == typecansee && houseTypeImage.length > 3" v-on:click="dealAllHouseType(0)">
						收起
					</div>
				</div>
				<div class="part3">
					<div class="title">楼盘动态</div>
					<div class="allnews items-display-flex item-row">
						<div class="left">
							<div v-if="index < newscansee" v-for="(item,index) in news">
								<div v-if="index==0" class="poz-relative date2">{{item.date}}</div>
								<div v-else class="poz-relative date1">{{item.date}}</div>
							</div>
						</div>
						<div class="right">
							<div v-if="index < newscansee" v-for="(item,index) in news">
								<div v-if="index==0" class="poz-relative content2">{{item.title}}</div>
								<div v-else class="poz-relative content1">{{item.title}}</div>
							</div>
						</div>
					</div>
					<div class="more-type" v-if="news.length > newscansee" v-on:click="dealAllNewsType(1)">
						查看全部动态
					</div>
					<div class="more-type" v-if="news.length == newscansee && news.length > 4" v-on:click="dealAllNewsType(0)">
						收起
					</div>
				</div>
				<div class="part3">
					<div class="title">楼盘周边</div>
					<div class="map items-display-flex flex-row">
						<div id="allmap" class="mapview"></div>
						<div class="business">
							<div class="sites items-display-flex flex-row flex-between">
								<div v-bind:class="[siteindex==1 ? 'lab1':'lab2']" v-on:click="changeSite(1,'公交')">公交</div>
								<div v-bind:class="[siteindex==2 ? 'lab1':'lab2']" v-on:click="changeSite(2,'地铁')">地铁</div>
								<div v-bind:class="[siteindex==3 ? 'lab1':'lab2']" v-on:click="changeSite(3,'学校')">学校</div>
								<div v-bind:class="[siteindex==4 ? 'lab1':'lab2']" v-on:click="changeSite(4,'餐饮')">餐饮</div>
								<div v-bind:class="[siteindex==5 ? 'lab1':'lab2']" v-on:click="changeSite(5,'医院')">医院</div>
								<div v-bind:class="[siteindex==6 ? 'lab1':'lab2']" v-on:click="changeSite(6,'银行')">银行</div>
								<div v-bind:class="[siteindex==7 ? 'lab1':'lab2']" v-on:click="changeSite(7,'购物')">购物</div>
							</div>
							<div class="sites-list">
								<div v-if='siteindex==1' class="list"><span class="iconfont icon-gongjiaoche"></span><label>公交</label></div>
								<div v-else-if='siteindex==2' class="list"><span class="iconfont icon-ditie"></span><label>地铁</label></div>
								<div v-else-if='siteindex==3' class="list"><span class="iconfont icon-xuexiaogaikuang"></span><label>学校</label></div>
								<div v-else-if='siteindex==4' class="list"><span class="iconfont icon-canyin"></span><label>餐饮</label></div>
								<div v-else-if='siteindex==5' class="list"><span class="iconfont icon-yiyuan"></span><label>医院</label></div>
								<div v-else-if='siteindex==6' class="list"><span class="iconfont icon-yinhang"></span><label>银行</label></div>
								<div v-else-if='siteindex==7' class="list"><span class="iconfont icon-xiazai50"></span><label>购物</label></div>
								
								<div v-for="item in sitedata" class="list items-display-flex flex-row flex-between" v-on:click="showAddr(item)">
									<div>{{item.title}}</div>
									<div>{{item.distance}}m</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="part3">
					<div class="title">楼盘推荐</div>
					<div class="content items-display-flex flex-row flex-between" style="align-items: flex-start;">
						<div v-for="item in hdata2" class="item" @click='toAnotherHouse(item.id)'>
							<div class="poz-relative size">
								<img v-bind:src="item.img_path" />
								<div class="img-lab items-display-flex flex-row flex-between">
									<div class="lab-cont3">
										<div class="lab5">{{item.house_name}}</div>
									</div>
									<div class="lab-cont4">
										<div class="lab6">口袋返现</div>
										<div class="lab7">{{item.return_money}}万</div>
									</div>
								</div>
							</div>
							<div class="intro">
								<div class="title" v-if="item.house_unit_price>0">
									<span>{{item.house_unit_price}}</span>元/平米
								</div>
								<div class="title" v-else>
									<span style="font-size: 20px;">售价待定</span>
								</div>
								<div class="addr">
									地址：{{item.address}}
								</div>
								<div class="flag items-display-flex flex-row flex-display-warp">
									<span class="xf-flag-item" v-for="flagitem in item.marks">{{flagitem}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--<div class="big-pic city-choose-panel" v-if='bigpicshow==1'>-->
				<div class="big-pic city-choose-panel" v-if='bigpicshow==1'>
					<img v-bind:src='bigpicurl' />
				</div>
			</div>
			
			
						
			<div id="imgtips_panel" class="tips-panelcss">
				<div class="panel">
					<div class="content poz-relative">
						<button class="close-btn" onclick="TipsExit()"><span class="iconfont icon-close"></span></button>
						
						
						<div class="swiper-container4">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item2,index) in bigMapList">
								<div class="item">
									<img v-bind:src="item2"/>
								</div>
							</div>
						</div>
					
					<div class="swiper-button-next swiper-button-next1 next"><span class="iconfont icon-nvxingfuben1"></span></div>
					<div class="swiper-button-prev swiper-button-prev1 prev"><span class="iconfont icon-nvxingfuben"></span></div>
				</div>
						
						
						<!--<div class="contentimg">
							<img id="msgpic" src="../img/demo/pic1.jpg" style="width: 100%;height:auto;"/>
						</div>-->
					</div>
					
					
				</div>
				
				
				
			</div>
			
		</div>
		
		
					
		
		
		<div id="page_footer" class="page-footer"></div>
	</body>
	<script>
		
		$(document).ready(function() {
			loadHeaderAndFooter();
			loadData();
			
		});
		var maincnt = new Vue({
			el: '#maincontent',
			data: {
				imgindex: 0,
				housedata: {
					imgs: [],
					detail: {}
				},
				houseTypeImage: [],
				typecansee: 3,
				news: [],
				newscansee: 4,
				hdata2:[],
				siteindex:0,
				sitedata:[],
				curCityName:'',
				notice:0,
				bigpicurl:'',
				bigpicshow:0,
				isloadtops:false,
				bigMapList:[]
			},
			methods: {
				paymoneys:function(payment_rate,total_price){
					var result = (payment_rate/100) * total_price;
					if(result>0){
						return "(约"+result.toFixed(1)+"万)"
					}
					return "";
				},
				dealAllHouseType: function(flag) {
					if(flag == 1) {
						this.typecansee = this.houseTypeImage.length;
					} else {
						this.typecansee = 3;
					}
				},
				dealAllNewsType: function(flag) {
					if(flag == 1) {
						this.newscansee = this.news.length;
					} else {
						this.newscansee = 4;
					}
				},
				changeSite:function(flag,thing){
					this.siteindex = flag;
					searchSthing(thing);
				},
				showAddr:function(item){
					var opts = {
					  width : 200,     // 信息窗口宽度
					  height: 100,     // 信息窗口高度
					  fontSize: 14,
					  title : item.codetitle , // 信息窗口标题
					}
					var infoWindow = new BMap.InfoWindow(item.address,opts);
					map.openInfoWindow(infoWindow,item.point);
				},
				showBigImg:function(urls,index){
					//显示大图				
					this.bigMapList = this.housedata.images;
					$('#imgtips_panel').show();
				},
				toAnotherHouse:function(itemid){
					var urlstr = 'xfdetail.html?hid='+itemid;
					window.open(urlstr);
				},
				noticeAction:function(){
					this.notice = 1;
					console.log('aabb');
					var userinfo = getUserInfo();
					if(!userinfo){
						showtips({},{tipsmsg:"请先登录,在执行此操作.",tipstype:2});
						return;
					}
					
					console.log('this.housedata.has_attention='+this.housedata.has_attention);
					if(this.housedata.has_attention != 0){
						showtips({},{tipsmsg:"你已经关注了此楼盘!",tipstype:2});
						return;
					}
					var urlstr = publicUrl+'/v1/favorite/edit';
					console.log('this.housedata.has_attention='+this.housedata.has_attention);
					jQuery.get(urlstr,{house_id:houseid,uid:userinfo.uid,status:1},function(res){
						if(res.code=="success"){
			                 showtips({},{tipsmsg:"关注成功!",tipstype:2});
			                 maincnt.housedata.has_attention = 1;			        
			            }
			            else {
			            	showtips({},{tipsmsg:res.message,tipstype:2});
			            }
					});
				},
				helpkefu:function(){
					window.open('https://kefu.easemob.com/webim/im.html?configId=666a1310-a661-4c09-b9e3-8bc1c87764f3');
				},
				baobeiOnline:function(){
					loginpart.baobeishow = 1;
				},
				tocurxf:function(){
					window.location.href = 'qgxf.html';
				}
			}
		});
		var imgsSwp;
		var imgstypeSwp;
		function loadHeaderAndFooter() {
			$('#page_header').load('../template/header.html');
			$('#page_menu').load('../template/mainmenu3.html', function() {
				changeMenu(2);
			});
			$('#city_sets').load('../template/choosecity.html');
			$('#page_footer').load('../template/footer.html');
		}
		
		var houseid = 143;
		function loadData() {
			var hid = getQueryString("hid");
			if(hid){
				houseid = hid;
			}
			var uid = 0;
			var userinfo = getUserInfo();
			if(userinfo){
				uid = userinfo.uid;
			}
			
			var urlstr = publicUrl+'/v1/house/get';
//			var urlstr = 'http://www.kdcode.com/v1/house/get';
			jQuery.get(urlstr,{id:houseid,uid:uid},function(res){
				
				maincnt.housedata = res.data.house;	
				var marr = maincnt.housedata.images;
				for(var i =0;i<marr.length;i++){
					maincnt.housedata.images[i] = ServerImgUrl + maincnt.housedata.images[i];
					maincnt.housedata.imageLen = marr.length;
					
				}
				maincnt.houseTypeImage = maincnt.housedata.houseTypeImage;
				for(var i =0;i<maincnt.houseTypeImage.length;i++){
					maincnt.houseTypeImage[i].img_path = ServerImgUrl + maincnt.houseTypeImage[i].img_path;
					
					for(var j =0;j<maincnt.houseTypeImage[i].typeimg.length;j++){
						maincnt.houseTypeImage[i].typeimg[j].img_path = ServerImgUrl + maincnt.houseTypeImage[i].typeimg[j].img_path;
//						maincnt.houseTypeImage[i].typeimg[j].img_path = 'http://www.kdback.com' + maincnt.houseTypeImage[i].typeimg[j].img_path;
						
					}
				}
				
				var timeid = setTimeout(function() {
				clearTimeout(timeid);
					imgsSwp = new Swiper('.swiper-container3', {
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						}
					});
					imgsSwp.on('slideChangeTransitionEnd', function() {
						maincnt.imgindex = imgsSwp.activeIndex;
					});
					
					imgstypeSwp = new Swiper('.swiper-container4', {
						navigation: {
							nextEl: '.swiper-button-next1',
							prevEl: '.swiper-button-prev1',
						},
						paginationClickable: true,
						observer:true,//修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,
					}
					);
					imgstypeSwp.on('slideChangeTransitionEnd', function() {
//						maincnt.imgindex = imgstypeSwp.activeIndex;
					});
				}, 200);
				
				
				
				var discount_str = '';
				if(parseInt(maincnt.housedata.discount_1)>0){
		            discount_str+="贷款:"+maincnt.housedata.discount_1+"%  ";
		        }
		        if(parseInt(maincnt.housedata.discount_2)>0){
		            discount_str+="全款:"+maincnt.housedata.discount_2+"%";
		        }
		        if(parseInt(maincnt.housedata.discount_1)<=0&&parseInt(maincnt.housedata.discount_2)<=0){
		            discount_str+="--";
		        }
				maincnt.housedata.discount_str = discount_str;
				
				maincnt.news = maincnt.housedata.state_info;
				for(var i =0;i<maincnt.news.length;i++){
					maincnt.news[i].date = timestampToTime(maincnt.news[i].create_at);
				}
				if(maincnt.news.length <=0){
					maincnt.news.push({title:"暂无楼房动态"});
				}
				
				loadNearHouse(maincnt.housedata.region_id);
				for(var str in maincnt.housedata){
					if(!maincnt.housedata[str]){
						if(str == 'has_attention')
							continue;
						maincnt.housedata[str] = '--';
					}
				}
				
				if(maincnt.housedata.address && maincnt.housedata.address!='--')
					getUserLocation(maincnt.housedata.address);
				else
					getUserLocation(maincnt.housedata.house_name);
			});
			maincnt.siteindex = 1;
			var cityName = getCookie('kdcurcityName');		
			maincnt.curCityName = cityName;
		}
		//附近的房子 
		function loadNearHouse(rid) {
			var urlstr = publicUrl+'/v1/house/get-same-region-house';
			jQuery.get(urlstr,{region_id:rid},function(res){
				var list = res.data.list;
				var tmp = [];
				for(var i =0;i<list.length;i++){
					if(tmp.length>=4){
						break;
					}
					list[i].img_path = ServerImgUrl + list[i].img_path;
					tmp.push(list[i]);
				}
				
				maincnt.hdata2 = tmp;
			});
		}
		
		var point;
		var map;
		function searchSthing(thing) {
			map = new BMap.Map("allmap",{enableMapClick: false});
			map.centerAndZoom(point, 20);//初始化地图，设置中心点坐标和地图级别
		    map.enableScrollWheelZoom(true);
			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
			var local = new BMap.LocalSearch(map, {
				renderOptions: {
					map: map,
					panel: "results"
				},
				onSearchComplete: function (results){
					if (local.getStatus() == BMAP_STATUS_SUCCESS) {
		                // 百度地图成功返回，将每个周边信息储存到nearby_info里
		                var datas = [];
		                for (var i = 0; i < results.getCurrentNumPois(); i++) {
		                    var locate = results.getPoi(i);
		                    for(var str in locate){
		                    }
		                    // console.log('==========================================');
		                    if (locate != null) {
		                        // 查询结果与房屋的距离
		                        var distance = parseFloat(map.getDistance(locate.point, point)).toFixed(1);
		                        var data = {
		                        	distance:parseInt(distance),
		                        	title: locate.title,
		                        	codetitle:('<span style="color:#cc5522;font-size:16px;font-weight:bold;">'+locate.title+'</span>'),
		                        	point:locate.point,
		                        	address:('<span style="font-size:12px;color:#000000;">'+locate.address+'</span>')
		                        };
		                        datas.push(data);
		                    }
		                }
		                datas.sort(compare('distance'));
		                maincnt.sitedata = datas;		                
		            }
					else{
						maincnt.sitedata = [];
					}
				}
			});
			local.searchNearby(thing, point);
			
			var icon = new BMap.Icon('http://www.jubenxiong.com/games/kdhouse/img/addr.png', new BMap.Size(26, 32), {
				anchor: new BMap.Size(10, 30)
			});
			var offsetx = -0.5 * 14 * maincnt.housedata.house_name.length + 14;
			var label = new BMap.Label(maincnt.housedata.house_name, {
				offset: new BMap.Size(offsetx, 30)
			});
			label.setStyle({
				fontSize:'14px',
				fontFamily:'微软雅黑',
				background:'rgba(0,0,0,0.2)',
				padding:'5px',
				border:'none',
				borderRadius:'5px',
				fontWeight:'bold'
			});
			var mk = new BMap.Marker(point,{icon:icon});
			mk.setLabel(label);
			map.addOverlay(mk);
			map.panTo(point);
		}
		
		function TipsExit(){
			$('#imgtips_panel').hide();
		}
		
		//显示户型大图
		function showBigTypeImg(house){
			var timgs = house.typeimg;
			var arrays = [];
			for(var i=0;i<timgs.length;i++){
				arrays.push(timgs[i].img_path);
			}
			maincnt.bigMapList = arrays;
			$('#imgtips_panel').show();
		}
		
	</script>

</html>